{% extends "_layouts/examples.html" %}
{% block title %}MAAS layout{% endblock %}

{% block content %}
<header id="navigation" class="p-navigation">
  <div class="row p-navigation__row">
    <div class="p-navigation__banner">
      <div class="p-navigation__logo">
        <a class="p-navigation__item" href="#">
          <img src="https://assets.ubuntu.com/v1/d96d86b5-vanilla_black-orange_hex.svg" alt="Vanilla framework" class="p-navigation__image">
        </a>
      </div>
      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
    </div>
    <nav class="p-navigation__nav u-image-position" aria-label="Example main">
      <span class="u-off-screen">
        <a href="#main-content">Jump to main content</a>
      </span>
      <ul class="p-navigation__items">
        <li class="p-navigation__item is-selected" >
          <a class="p-navigation__link" href="#">Hardware</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">Images</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">DNS</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">AZs</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">Subnets</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">Settings</a>
        </li>
      </ul>
      <ul class="p-navigation__items u-image-position--right" >
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">Maria</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<div class="p-strip--highlighted is-shallow">
  <div class="row">
    <div class="col-8">
      <h1 class="p-heading--3">Machines</h1>
    </div>
    <div class="col-4">
      <div class="u-align--right">
        <span class="p-contextual-menu">
          <a href="#" class="p-button p-contextual-menu__toggle" aria-controls="#menu" aria-expanded="false"
            aria-haspopup="true">
            Change pool <i class="p-icon--chevron-down"></i>
          </a>
          <span class="p-contextual-menu__dropdown" id="menu" aria-hidden="true">
            <span class="p-contextual-menu__group">
              <a href="#" class="p-contextual-menu__link">Link</a>
              <a href="#" class="p-contextual-menu__link">Link</a>
              <a href="#" class="p-contextual-menu__link">Link</a>
            </span>
            <span class="p-contextual-menu__group">
              <a href="#" class="p-contextual-menu__link">Link</a>
              <a href="#" class="p-contextual-menu__link">Link</a>
              <a href="#" class="p-contextual-menu__link">Link</a>
            </span>
          </span>
        </span>
      </div>
    </div>
  </div>
</div>
<div class="p-strip is-shallow">
  <nav class="p-tabs" aria-label="Example tabs">
    <div class="row">
      <ul class="p-tabs__list" role="tablist">
        <li class="p-tabs__item" role="presentation">
          <a href="#section1" class="p-tabs__link" tabindex="0" aria-controls="section1" aria-selected="true">Section
            1</a>
        </li>
        <li class="p-tabs__item" role="presentation">
          <a href="#section2" class="p-tabs__link" tabindex="-1" aria-controls="section2">Section 2</a>
        </li>
        <li class="p-tabs__item" role="presentation">
          <a href="#section3" class="p-tabs__link" tabindex="-1" aria-controls="section3">Section 3</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="row">
    <div class="col-3">
      <div class="">
        <h4 class="u-sv-1">Filter by</h4>

        <aside class="p-accordion">
          <ul class="p-accordion__list">
            <li class="p-accordion__group">
              <button type="button" class="p-accordion__tab" id="owner" aria-controls="owner-section" aria-expanded="false">Owner</button>
              <section class="p-accordion__panel" id="owner-section" aria-hidden="true" aria-labelledby="owner">
                <p>Owner panel</p>
              </section>
            </li>
            <li class="p-accordion__group">
              <button type="button" class="p-accordion__tab" id="status" aria-controls="status-section" aria-expanded="false">Status</button>
              <section class="p-accordion__panel" id="status-section" aria-hidden="true" aria-labelledby="status">
                <p>Status panel</p>
              </li>
            </section>
            <li class="p-accordion__group">
              <button type="button" class="p-accordion__tab" id="tags" aria-controls="tags-section" aria-expanded="false">Tags</button>
              <section class="p-accordion__panel" id="tags-section" aria-hidden="true" aria-labelledby="tags">
                <p>Tags panel</p>
              </section>
            </li>
          </ul>
        </aside>
      </div>
    </div>
    <div class="col-9">
      <form class="p-search-box">
        <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on">
        <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
        <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
      </form>
      <table aria-label="MAAS table example" class="p-table--mobile-card">
        <thead>
          <tr>
            <th>FQDN | MAC</th>
            <th>Power</th>
            <th>Status</th>
            <th>Owner | Pool</th>
            <th class="u-align--right">Cores</th>
            <th class="u-align--right">RAM(GB)</th>
            <th class="u-align--right">Disks</th>
            <th class="u-align--right">Storage(GB)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th data-heading="FQDN | MAC">Machine 1</th>
            <td data-heading="Power">Off</td>
            <td data-heading="Status">Ready</td>
            <td data-heading="Owner | Pool">Maria</td>
            <td data-heading="Cores" class="u-align--right">8</td>
            <td data-heading="RAM(GB)" class="u-align--right">16</td>
            <td data-heading="Disks" class="u-align--right">2</td>
            <td data-heading="Storage(GB)" class="u-align--right">2</td>
          </tr>
          <tr>
            <th data-heading="FQDN | MAC">Machine 1</th>
            <td data-heading="Power">Off</td>
            <td data-heading="Status">Ready</td>
            <td data-heading="Owner | Pool">Maria</td>
            <td data-heading="Cores" class="u-align--right">8</td>
            <td data-heading="RAM(GB)" class="u-align--right">16</td>
            <td data-heading="Disks" class="u-align--right">2</td>
            <td data-heading="Storage(GB)" class="u-align--right">2</td>
          </tr>
          <tr>
            <th data-heading="FQDN | MAC">Machine 1</th>
            <td data-heading="Power">Off</td>
            <td data-heading="Status">Ready</td>
            <td data-heading="Owner | Pool">Maria</td>
            <td data-heading="Cores" class="u-align--right">8</td>
            <td data-heading="RAM(GB)" class="u-align--right">16</td>
            <td data-heading="Disks" class="u-align--right">2</td>
            <td data-heading="Storage(GB)" class="u-align--right">2</td>
          </tr>
          <tr>
            <th data-heading="FQDN | MAC">Machine 1</th>
            <td data-heading="Power">Off</td>
            <td data-heading="Status">Ready</td>
            <td data-heading="Owner | Pool">Maria</td>
            <td data-heading="Cores" class="u-align--right">8</td>
            <td data-heading="RAM(GB)" class="u-align--right">16</td>
            <td data-heading="Disks" class="u-align--right">2</td>
            <td data-heading="Storage(GB)" class="u-align--right">2</td>
          </tr>
          <tr>
            <th data-heading="FQDN | MAC">Machine 1</th>
            <td data-heading="Power">Off</td>
            <td data-heading="Status">Ready</td>
            <td data-heading="Owner | Pool">Maria</td>
            <td data-heading="Cores" class="u-align--right">8</td>
            <td data-heading="RAM(GB)" class="u-align--right">16</td>
            <td data-heading="Disks" class="u-align--right">2</td>
            <td data-heading="Storage(GB)" class="u-align--right">2</td>
          </tr>
          <tr>
            <th data-heading="FQDN | MAC">Machine 1</th>
            <td data-heading="Power">Off</td>
            <td data-heading="Status">Ready</td>
            <td data-heading="Owner | Pool">Maria</td>
            <td data-heading="Cores" class="u-align--right">8</td>
            <td data-heading="RAM(GB)" class="u-align--right">16</td>
            <td data-heading="Disks" class="u-align--right">2</td>
            <td data-heading="Storage(GB)" class="u-align--right">2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<hr />
<footer class="p-strip">
  <div class="row">
    <p>© 2017 Company name and logo are registered trademarks of Company Ltd.</p>
    <nav aria-label="Example footer">
      <ul class="p-inline-list--middot">
        <li class="p-inline-list__item">
          <a href="#">Footer link 1</a>
        </li>
        <li class="p-inline-list__item">
          <a href="#">Footer link 2</a>
        </li>
        <li class="p-inline-list__item">
          <a href="#">Footer link 3</a>
        </li>
        <li class="p-inline-list__item">
          <a href="#">Footer link 4</a>
        </li>
      </ul>
      <span class="u-off-screen">
        <a href="#">Go to the top of the page</a>
      </span>
    </nav>
  </div>
</footer>

<script>
  {% include 'docs/examples/patterns/accordion/_script.js' %}
</script>
{% endblock %}
